<!DOCTYPE html>  
<html lang="zh">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <link rel="stylesheet" href="styles.css">  
    <img src="hqyj.jpg"> 
    <!-- CSS 示例（styles.css） -->
    <style type="text/css">
        body {  
            font-family: Arial, sans-serif;  
            background-color: #f0f0f0;  
            color: #333;  
        }  
        header {  
            text-align: center;  
            margin: 20px 0;  
        }  
        
        main {  
            display: flex;  
            flex-direction: column;  
            align-items: center;  
        }  
        
        section {  
            margin: 20px;  
            padding: 20px;  
            background: white;  
            border-radius: 8px;  
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);  
        }  
        
        .device {  
            display: inline-block;  
            margin: 10px;  
            text-align: center;  
        }  
        </style>
</head>  
<body>  
    <header>  
        <h1>智能家居监控系统</h1>  
    </header>  
    <main>  
        <section id="temperature-humidity">  
            <h2>温湿度监控</h2>  
            <div>  
                <canvas id="tempChart"></canvas>  
                <canvas id="humidityChart"></canvas>  
            </div>  
        </section>  
        <section id="device-control">  
            <h2>设备控制</h2>  
            <div class="device" id="light">  
                <img src="light.png" alt="灯光" />  
                <button onclick="toggleDevice('light')">开/关</button>  
            </div>  
            <div class="device" id="air-conditioner">  
                <img src="air_conditioner.png" alt="空调" />  
                <button onclick="toggleDevice('air-conditioner')">开/关</button>  
            </div>  
            <!-- 添加更多设备 -->  
        </section>  
    </main>  
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>  
    <script src="script.js"></script>  
</body>  
</html>  


<!-- JavaScript 示例（script.js） -->
<script type="text/javascript">
const temperatureData = [];  
const humidityData = [];  

/* // 初始化图表   */
const tempCtx = document.getElementById('tempChart').getContext('2d');  
const humidityCtx = document.getElementById('humidityChart').getContext('2d');  

const tempChart = new Chart(tempCtx, {  
    type: 'line',  
    data: {  
        labels: [],  
        datasets: [{  
            label: '温度',  
            data: temperatureData,  
            borderColor: 'rgba(255, 99, 132, 1)',  
            borderWidth: 1  
        }]  
    }  
});  

const humidityChart = new Chart(humidityCtx, {  
    type: 'line',  
    data: {  
        labels: [],  
        datasets: [{  
            label: '湿度',  
            data: humidityData,  
            borderColor: 'rgba(54, 162, 235, 1)',  
            borderWidth: 1  
        }]  
    }  
});  

/* // 模拟数据获取和更新   */
setInterval(() => {  
    fetch('/api/sensors') // 替换为实际的 API 地址  
        .then(response => response.json())  
        .then(data => {  
            // 假设数据格式为 { temperature: x, humidity: y }  
            const { temperature, humidity } = data;  
            const timeLabel = new Date().toLocaleTimeString();  
            
            temperatureData.push(temperature);  
            humidityData.push(humidity);  
            tempChart.data.labels.push(timeLabel);  
            humidityChart.data.labels.push(timeLabel);  
            
            // 更新图表  
            tempChart.update();  
            humidityChart.update();  
        });  
}, 5000);  

// 控制设备函数  
function toggleDevice(deviceId) {  
    fetch(`/api/devices/${deviceId}/toggle`, { method: 'POST' })  
        .then(response => response.json())  
        .then(data => {  
            // 处理响应数据  
            alert(`设备 ${deviceId} 状态: ${data.status}`);  
        });  
}  
